<template>
	<view class="category">
		<view class="category_header">
			<text class="active">{{this.text}}</text>  分类列表
		</view>
		<view class="category_list">
			<view class="opt" v-for="item in classifys">
				<navigator class="link" :url="`/pages/topic_list/topic_list?name=${item.name}`">
					{{item.name}}
				</navigator>
			</view>
		</view>
		<view class="msg" v-if="classifys.length == 0">
			没有当前分类的内容~~
		</view>
	</view>
</template>

<script>
	// 导入二级分类集合对象
	import {categorysChildCollection } from '../../common/db/index.js';
	
	export default {
		data(){
			return {
				classifys: [],
				text: ""
			}
		},
		onLoad(option) {
			// console.log(option);
			// 判断路径是否有参数
			if(option.text) {
				// 调用获取二级菜单列表的方法
				this.listCategoryChild(option.text)
				this.text = option.text;
			}
		},
		
		methods: {
			// 获取二级菜单列表的方法
		    async listCategoryChild(text){
				uni.showLoading({
					title:"正在加载..."
				})
				await  categorysChildCollection.where({text: text}).get()
				.then(res=>{
					console.log(res);
					let result = res.result;
					// 赋值给classifys变量
					this.classifys = result.data;
				})
				.catch(err=> console.log(err))
				uni.hideLoading();
			}
		}
	}
</script>

<style lang="scss">
.category {
	padding: 20rpx 30rpx;
	.category_header {
		padding: 30rpx 0rpx;
		font-weight: bold;
		font-size: 16px;
		.active {
			color: deepskyblue;
			font-size: 20px;
		}
	}
	.category_list {
		.opt {
			.link {
				display: block;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #ccc;
				background-color: #f0f0f0;
				margin-bottom: 10rpx;
				padding-left: 20rpx;
			}
		}
	}
	.msg {
		padding: 50rpx 0rpx;
		color: #666;
		text-align: center;
	}
}
</style>
